<template>
  <div class="shade" v-show="filterShow">
    <div class="shadeChoose">
      <div class="vicp-close"  @click="filterShow=false">
        <i class="el-icon-close vicp-icon4"></i>
      </div>
      <div class="shadeMain">
        <div class="channelsChoose">
          <div class="chinnelSwitch">
            <span class="switch">选择渠道：</span>
            <el-switch
            v-model="chinnelSwitch"
            on-color="#13ce66"
            off-color="#ff4949" @change="c_s_Change"></el-switch>
            <span class="chooseEnd">
              已选择
              <span :style="{'color':this.$store.getters.theme[1]}">{{channelNumber?channelNumber:"全渠道"}}</span>
              项
            </span>
          </div>
          <div class="chinnelRadio" v-show="chinnelSwitch">
            <div class="filter" >
              <el-input v-model="channelVal" placeholder="请输入渠道名称" icon="search"></el-input>
              <el-button type="info" size="small" @click="allChannel">全渠道</el-button>
              <el-button type="info" size="small"  @click="noAllChannel">非全渠道</el-button>
            </div>
            <template>
              <el-radio-group v-model="chinnelRadio"  @change="channelRadioChange">
                <el-radio :label="item.label" v-for="item in newChannels">{{item.value}}</el-radio>
              </el-radio-group>
            </template>
            <div class="afterChoose">
              <span>选中筛选条件：</span>
              <el-tag v-show="chinnelTagValue"
                  :closable="true" type="success"
                  @close="handleClose(tag)"
                >{{chinnelTagValue}}</el-tag>
            </div>
          </div>
        </div>
        <div class="serversChoose">
          <div class="serverSwitch">
            <span class="switch">选择区服：</span>
            <el-switch
            v-model="serverSwitch"
            on-color="#13ce66"
            off-color="#ff4949" @change="s_s_change"></el-switch>
            <span class="chooseEnd">
              已选择
              <span :style="{'color':this.$store.getters.theme[1]}">{{serverNumber?serverNumber:"全区服"}}</span>
              项
            </span>
          </div>
          <div class="chinnelRadio" v-show="serverSwitch">
            <div class="filter">
              <el-input v-model="serverVal" placeholder="请输入渠道名称" icon="search"></el-input>
              <el-button type="info" size="small" @click='allServer'>全服</el-button>
              <el-button type="info" size="small" @click='noAllServer'>非全服</el-button>
            </div>
            <template>
              <el-radio-group v-model="serverRadio"  @change="serverRadioChange">
                <el-radio :label="item.label" v-for="item in newServers">{{item.value}}</el-radio>
              </el-radio-group>
            </template>
            <div class="afterChoose">
              <span>选中筛选条件：</span>
              <el-tag v-show="serverTagValue"
                  :closable="true" type="success"
                  @close="handleClose2(tag)"
                >{{serverTagValue}}</el-tag>
            </div>
          </div>
        </div>
        <div class="sureBtn">
          <el-button type="info" @click='sure'>确认</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        // 高级筛选模态框
        filterShow: false,
        // 渠道筛选开关
        chinnelSwitch: false,
        // 服务器筛选开关
        serverSwitch: false,
        // channelVal渠道的搜索框的值
        channelVal: '',
        // 服务器的搜索框的值
        serverVal: '',
        // 渠道选择的数量
        channelNumber: 0,
        // 服务器选择的数量
        serverNumber: 0,
        // 渠道单选按钮值
        chinnelRadio: "0",
        // 区服单选按钮值
        serverRadio: "0",
        // 渠道标签
        chinnelTagValue: '全渠道',
        // 区服标签
        serverTagValue: '全区服'
      }
    },
    methods: {
      // 通用 成功 与 失败
      successFun(data) {
        this.$message({
          message: data,
          type: 'success'
        });
      },
      errorFun(data) {
        this.$message.error(data);
      },
      // 全部渠道按钮点击
      allChannel() {
        this.chinnelRadio = "0";
      },
      // 非全部渠道按钮点击
      noAllChannel() {
        if(this.chinnelRadio !== "0"){
          this.errorFun("已经是非全渠道！")
        }else{
          this.chinnelRadio = "";
          this.channelNumber = 0;
          this.chinnelTagValue = false;
        }
      },
      // 全服点击按钮
      allServer() {
        this.serverRadio = "0";
      },
      // 非全服按钮点击
      noAllServer() {
        if(this.serverRadio !== "0"){
          this.errorFun("已经是非全服！")
        }else{
          this.serverRadio = "";
          this.serverNumber = 0;
          this.serverTagValue = false;
        }
      },
      // 渠道开关函数
      c_s_Change(val) {
        this.channelNumber = 0;
        this.chinnelRadio = "0";
      },
      // 服务器开关函数
      s_s_change(val) {
        this.serverNumber = 0;
        this.serverRadio = "0";
      },
      //渠道单选按钮函数
      channelRadioChange(val) {
        if(val === '0'){
          this.channelNumber = 0;
          this.serverSwitch = true;
        }else if(val != 0){
          this.channelNumber = 1;
          this.serverRadio = '0';
          this.serverSwitch = false;
        }else{
          this.channelNumber = "0";
          this.serverRadio = '0';
          this.serverSwitch = false;
        }
        for(var i in this.channels){
          if(val === this.channels[i]['label']){
            this.chinnelTagValue = this.channels[i]['value']
          }
        }
        this.postObj.channel = val;
        this.postObj.server= '0';
        this.postObj.platform = '0';
        this.$emit('getlist','updateChannel',`channel=${val}`);
      },
      //服务器单选按钮函数
      serverRadioChange(val) {
        if(val === '0'){
          this.serverNumber = 0;
          this.chinnelSwitch = true;
        }else if(val != 0){
          this.serverNumber = 1;
          this.chinnelRadio = '0';
          this.chinnelSwitch = false;
        }else{
          this.serverNumber = "0";
          this.chinnelRadio = '0';
          this.chinnelSwitch = false;
        }
        for(var i in this.servers){
          if(val === this.servers[i]['label']){
            this.serverTagValue = this.servers[i]['value']
          }
        }
        this.postObj.channel = '0';
        this.postObj.server = val;
        this.postObj.platform = '0';
        this.$emit('getlist','updateServer',`server=${val}`);
      },
      // 模态框确定
      sure() {
        console.log(this.postObj)
        if(this.postObj.channel === ""){
          this.errorFun("请选择渠道！")
        }else if(this.postObj.server === ""){
          this.errorFun("请选择区服！")
        }else{
          this.filterShow = false;
          this.$emit('get',this.postObj)
        }
      },
      // 模态框取消关闭数据不记录
      cancel() {
        this.filterShow = false;
        this.chinnelRadio = '0';
        this.serverRadio = '0';
      },
      // 渠道标签点击
      handleClose(tag) {
        console.log(12)
        this.channelNumber = "0";
        this.chinnelRadio = "";
        this.chinnelTagValue = false;
      },
      // 区服标签点击
      handleClose2(tag) {
        console.log(12)
        this.serverNumber = "0";
        this.serverRadio = "";
        this.serverTagValue = false;
      },
    },
    computed: {
      // 渠道过滤
      newChannels: function() {
        var that = this;
        return that.channels.filter(function(item) {
          return item.value.toLowerCase().indexOf(that.channelVal.toLowerCase()) !== -1;
        })
      },
      // 区服过滤
      newServers: function() {
        var that = this;
        return that.servers.filter(function(item) {
          return item.value.toLowerCase().indexOf(that.serverVal.toLowerCase()) !== -1;
        })
      }
    },
    props: ['channels','servers','postObj']
  }
</script>
